<table>
  <thead>
    <tr>
      <th>name</th>
      <th>favorite</th>
      <th>bookmark</th>
    </tr>
  </thead>
  <tr *ngFor="let model of models">
    <td>{{ model.name }}</td>
    <td>{{ model.favorite }}</td>
    <td>
      <hydro-icon
        type="bookmark"
        class="model__favorite-icon"
        (click)="toggleFavorite(model)"
        [ngClass]="{ 'model__favorite-icon--selected': model.favorite }"
      ></hydro-icon>
    </td>
  </tr>
</table>

<ng-template #modelCard let-model>
  <div class="model" [routerLink]="[model.id]">
    <div class="model__header">
      <div class="model__name">{{ model.name }}</div>
      <hydro-icon
        type="bookmark"
        class="model__favorite-icon"
        (click)="toggleFavorite(model)"
        [ngClass]="{ 'model__favorite-icon--selected': model.favorite }"
      ></hydro-icon>
    </div>
    <div class="model__versions">
      <div class="model__versions-count">6</div>
      <span class="model__versions-text">versions</span>
    </div>
  </div>
</ng-template>
